<template>
  <input type="text" v-model="slogan">
  <h1 v-text="slogan"></h1>
  <h2>直播播报：<span v-text="result"></span></h2>
  <h2>
    中国队进球数：
    <span v-text="team.china"></span>
    &nbsp;&nbsp;&nbsp;&nbsp;<button @click="team.china++">点击中国队进一球</button>
  </h2>
  <h2>
    韩国队进球数：
    <span v-text="team.korea"></span>
    &nbsp;&nbsp;&nbsp;&nbsp;<button @click="team.korea++">点击韩国队进一球</button>
  </h2>
</template>

<script>
import {computed, reactive, ref, watch, watchEffect,} from "vue";

export default {
  name: "LhzD",
  setup() {
    const slogan = ref('桃李不言下自成蹊');
    const team = reactive({
      china: 0,
      korea: 0
    });
    const result = ref('势均力敌');
    watchEffect(function () {
      if (team.china > team.korea) {
        result.value = '中国队领先';
      } else if (team.china < team.korea) {
        result.value = '韩国队领先';
      } else {
        result.value = '势均力敌';
      }
    });
    watchEffect(function () {
      // 只能监听变化后的值
      console.log('slogan >>> ' + slogan.value);
    });
    watch(slogan, function (value, oldValue) {
      // 第一个参数是变化后的值
      // 第二个参数是变化前的值
      console.log(`value >>> ${value} \t oldValue >>> ${oldValue}`);
    });
    // deep:当需要对对象等引用类型数据进行深度监听时，设置deep: true,默认值是false。
    // immediate：默认情况下watch是惰性的，设置immediate: true时，watch会在初始化时立即执行回调函数一次。
    // flush：控制回调函数的执行时机，。它可设置为 pre、post 或 sync。
    //   pre：默认值，当监听的值发生变更时，优先执行回调函数（在dom更新之前执行）。
    //   post：dom更新渲染完毕后，执行回调函数。
    //   sync:一旦监听的值发生了变化，同步执行回调函数（建议少用）。

    return {
      slogan, result, team
    }
  }
}
</script>

<style scoped>

</style>